<template>
	<view>
		<app-dialog ref="dialog" width="100%" @confirm="save" bg="" :isFooter="false" :isClose="false">
			<view class="content">
				<view class="title">
					<view>新增图片</view>
					<u-icon name="close" color="#276329" size="36" @tap="close"></u-icon>
				</view>
				<view class="list">
					<u--form labelPosition="left" :model="model1"  ref="uForm" labelWidth="160rpx">
						<u-form-item label="类型：" prop="radiovalue1" ref="item1">
							<u-radio-group placement="row" v-model="model1.radiovalue1" size="35rpx" iconSize="35rpx">
								<u-radio labelSize="28rpx" v-for="(item, index) in radiolist1" :key="index"
									:label="item.name" :name="item.type">
								</u-radio>
							</u-radio-group>

						</u-form-item>
						<u-form-item v-if="model1.radiovalue1 == 2" label="视频名称：" prop="selectname" ref="item1"
							@click="showSelect = true; ">
							<u--input v-model="model1.selectname" disabled disabledColor="#ffffff" placeholder="请选择视频"
								border="none"></u--input>
							<u-picker :show="showSelect" @cancel="showSelect = false" :columns="spList"
								@confirm="videoSelect()" keyName="name"></u-picker>
							<!-- <u--input v-model="model1.selectname" disabled disabledColor="#ffffff" placeholder="请选择视频"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon> -->

						</u-form-item>
						<u-form-item v-if="model1.radiovalue1 == 3" label="模型名称：" prop="selectname" ref="item1"
							@click="showSelect2 = true; ">
							<u--input v-model="model1.selectname" disabled disabledColor="#ffffff" placeholder="请选择模型"
								border="none"></u--input>
							<u-picker :show="showSelect2" @cancel="showSelect2 = false" :columns="modList"
								@confirm="modSelect()" keyName="name"></u-picker>
							<!-- <u--input v-model="model1.selectname" disabled disabledColor="#ffffff" placeholder="请选择模型"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon> -->

						</u-form-item>
						<u-form-item v-if="model1.radiovalue1 == 3" label="模型尺寸：" prop="selectname" ref="item1">
							<u--input v-model="model1.scale1"  placeholder="请输入模型尺寸"
								></u--input>
						</u-form-item>
						<u-form-item v-if="model1.radiovalue1 == 3" label="模型尺寸：" prop="selectname" ref="item1">
							<u--input v-model="model1.scale2"  placeholder="请输入模型尺寸"
								></u--input>
						</u-form-item>
						<u-form-item v-if="model1.radiovalue1 == 3" label="模型尺寸：" prop="selectname" ref="item1">
							<u--input v-model="model1.scale3"  placeholder="请输入模型尺寸"
								></u--input>
						</u-form-item>
						<u-form-item v-if="model1.radiovalue1 == 3" label="模型角度：" prop="selectname" ref="item1">
							<u--input v-model="model1.rotation1"  placeholder="请输入模型角度"
								></u--input>
						</u-form-item>
						<u-form-item v-if="model1.radiovalue1 == 3" label="模型角度：" prop="selectname" ref="item1">
							<u--input v-model="model1.rotation2"  placeholder="请输入模型角度"
								></u--input>
						</u-form-item>
						<u-form-item v-if="model1.radiovalue1 == 3" label="模型角度：" prop="selectname" ref="item1">
							<u--input v-model="model1.rotation3"  placeholder="请输入模型角度"
								></u--input>
						</u-form-item>
						<u-form-item label="类型" prop="radiovalue1" ref="item1">
							<u-radio-group placement="row" v-model="model1.sfgg" :customStyle="{display: 'flex'}"
								size="35rpx" iconSize="35rpx">
								<u-radio labelSize="28rpx" v-for="(item, index) in radiolist2" :key="index"
									:label="item.name" :name="item.type">
								</u-radio>
							</u-radio-group>

						</u-form-item>

						<u-form-item label="图片：" prop="videoupload" ref="item1">
							<!-- <button class="upload_button" @tap="afterRead()">
								<u-icon name="plus" color="#fff"></u-icon>
								添加图片
							</button> -->
							<u-upload @delete="del" width="160" height="160" :fileList="tpList" :compressed="true"
								:maxDuration="60" :capture="[ 'album']" name="2" @afterRead="afterRead" 
								:maxCount="1"></u-upload>
						</u-form-item>
					</u--form>
					<u-button type="primary" text="保存" customStyle="margin-top: 50px" @click="save"
						color="linear-gradient(to right, rgb(0, 150, 136), rgb(139, 195, 74))"></u-button>
				</view>
			</view>

		</app-dialog>
		<!-- <u-action-sheet :show="showSelect"  :actions="spList" title="请选择视频" :closeOnClickOverlay="true" @close="showSelect=false"
			cancelText="取消" @select="videoSelect">
		</u-action-sheet> -->
		<!-- <u-action-sheet :show="showSelect2"  :actions="modList" title="请选择模型"
			 @select="modSelect">
		</u-action-sheet> -->
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				id: '',
				modList: [
					[]
				],
				spList: [
					[]
				],
				tpList: [],
				model1: {
					radiovalue1: '视频',
					selectname: '',
					sfgg: '公共',
					spid: '',
					lx: 1,
					scale1: '0',
					scale2: '0',
					scale3: '0',
					rotation1: '0',
					rotation2: '0',
					rotation3: '0',
				},
				radiolist1: [{
						name: '视频',
						type: 2,
						disabled: false
					},
					{
						name: '模型',
						type: 3,
						disabled: false
					},

				],
				radiolist2: [{
						name: '公共',
						type: 1,
						disabled: false
					},
					{
						name: '定位',
						type: 0,
						disabled: false
					},

				],
				fileList1: [],
				showSelect: false,
				showSelect2: false,
				rules: {
					
					selectname: [{
						name: '123'
					}],
					actions: [{
							name: '魔法相册1',
						},
						{
							name: '普通相册',
						},
						{
							name: '普通相册2',
						},
					],
				},
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			async afterRead(e) {
			
				this.tpList = [e.file];
			
			},
			videoSelect(e) {
				console.log(e)
				this.model1.spid = e.value[0].id
				this.model1.selectname = e.value[0].mc
				this.model1.lx = 0
				this.showSelect = false
			},
			modSelect(e) {
				console.log(e)
				this.model1.spid = e.value[0].id
				this.model1.selectname = e.value[0].mc
				this.model1.lx = 0
				this.showSelect2 = false
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			/**
			 * 保存
			 */
			async save() {
				console.log(this.model1)
				console.log(this.tpList)
				console.log(this.id)
				try {
					let videoRes = await this.$uploadFile("/app/sj/uploadTp", this.tpList[0].url, {
						sjid: this.id,
						sfgg: this.model1.sfgg,
						spid: this.model1.spid,
						rotation1: this.model1.rotation1,
						rotation2: this.model1.rotation2,
						rotation3: this.model1.rotation3,
						scale1: this.model1.scale1,
						scale2: this.model1.scale2,
						scale3: this.model1.scale3,
						lx:this.model1.radiovalue1
					}).then(res=>{
						this.$emit('getList');
						this.$refs.dialog.close();
					})
					///	this.$refs.dialog.close();
					//	this.hideLoading();
				} catch (e) {
					this.errorLoading(e);
				}
			},
			getById() {
				this.$http.post('/app/sj/getById', {
					id: this.id
				}).then(res => {
					this.spList[0] = res.sj.sjsp
					console.log(res)
				})
			},
			getModList() {
				this.$http.post('/app/sj/getModList', {}).then(res => {
					this.modList[0] = res.mxlb
				})
			},
			// 弹窗
			async open(id) {
				this.id = id
				this.getById()
				this.getModList()
				// 打开弹框
				await this.$refs.dialog.open();
			},
			async close() {
				await this.$refs.dialog.close();
			},
			// // 新增图片
			// async afterRead() {

			// 	// //0 相册  1魔法
			// 	// if (this.star == "1") {
			// 	//   this.$refs.arUploadFileRef.open(this.flid);
			// 	// } else {
			// 	uni.chooseImage({
			// 		count: 9, // 默认9, 设置图片的选择数量
			// 		sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			// 		sourceType: ['album', 'camera'], // 从相册选择
			// 		success: async (res) => {
			// 			console.log(res);
			// 			this.showLoading('上传中');
			// 			for (let item of res.tempFilePaths) {
			// 				await this.$uploadFile("/app/tp/uploadFile", item, {
			// 					sfar: 0,
			// 					flid: this.flid
			// 				})
			// 			}
			// 			this.hideLoading('上传完成');

			// 			// this.getList(1)
			// 		},
			// 		fail: (err) => {
			// 			// 处理错误情况
			// 			console.error(err);
			// 		}
			// 	});


			// 	// }

			// },
			//提交数据
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					this.visible = false
					uni.navigateTo({
						url: "/pages/gly/gly_form"
					})
				}).catch(errors => {
					this.visible = false
					uni.$u.toast('校验失败')
				})
			}
		},

	}
</script>

<style scoped lang="scss">
	.content {
		width: 90%;
		margin: 0 auto;
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;

		.title {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			color: #276329;

		}

		.list {}
	}

	/deep/ .u-form {
		// .u-form-item__body__right {
		//   border: 1rpx solid #276329 !important;
		//   height: 70rpx !important;
		// }

		.u-form-item {
			&:nth-child(2) {
				.u-form-item__body__right {
					border: none !important;
					height: auto !important;
				}
			}
		}
	}

	.upload_button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 180rpx;
		height: 68rpx;
		color: #333;
		font-family: PingFangSC;
		color: #ffffff;
		font-weight: 500;
		font-size: 32rpx;
		padding: 0;
		border-radius: 50px;
		background: linear-gradient(90deg, #13b1a2 0%, #276329 100%);
		border: none;
	}
</style>